<template>
    <el-form :inline="true" v-model="attrDataInfo.formData" ref="editorFormRef" size="small" label-width="44px">
        <attr-area></attr-area>
        <el-form-item label="模式">
            <el-select v-model="attrDataInfo.formData.timerType" placeholder="请选择模式" style="width:200px" @change="handleChange">
                <el-option v-for="(item, index) in timerTypes" :key="item.value" :label="item.name" :value="item.value"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="格式">
            <el-select v-model="attrDataInfo.formData.link" placeholder="请选择格式" style="width:200px" @change="handleChange">
                <el-option v-for="(item, index) in timerFormats" :key="item.value" :label="item.name" :value="item.value"></el-option>
            </el-select>
        </el-form-item>
        <el-row>
            <el-col :span="24">
                <el-form-item label="字体">
                    <el-select v-model="attrDataInfo.formData.timerFont" placeholder="请选择字体" style="width:200px" @change="handleChange">
                        <el-option v-for="(item, index) in fontItems" :key="item.value" :label="item.name" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="字号">
                    <el-input-number v-model="attrDataInfo.formData.timerFontsize" controls-position="right" :min="19" :max="256" @change="handleChange"></el-input-number>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-form-item label="颜色">
                    <el-color-picker v-model="attrDataInfo.formData.timerFontColor" @change="handleChange"></el-color-picker>
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item label="到期日期" label-width="80px" @change="handleChange"></el-form-item>
        <el-row>
            <el-col :span="24">
                <el-form-item>
                    <el-date-picker style="width:240px"
                        placeholder="选择日期"
                        v-model="attrDataInfo.formData.timerEndDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        @change="handleChange"
                        >
                    </el-date-picker>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-form-item label="到期时间" label-width="80px">
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item>
                    <el-time-picker style="width:240px"
                        placeholder="选择时间"
                        v-model="attrDataInfo.formData.timerEndTime"
                        value-format="HH:mm:ss"
                        :picker-options="{ selectableRange: '00:00:00 - 23:59:59' }"
                        @change="handleChange"
                        >
                    </el-time-picker>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</template>

<script>
import { fontItemArray, timerFormatArray } from "@/const/index";
import AttrArea from './AttrArea'
export default {
    data() {
        return {
            timerTypes: [
                { name:'倒计时', value: 'Countdown' },
                { name:'顺计时', value: 'Elapse' }
            ],
            timerFormats: timerFormatArray,
            fontItems: fontItemArray
        }
    },
    methods: {
        handleChange() {
            let html = this.$changeTemplateTimerFormat(
                this.attrDataInfo.formData.timerType, 
                this.attrDataInfo.formData.link,
                this.attrDataInfo.formData.timerEndDate + ' ' + this.attrDataInfo.formData.timerEndTime
            )
            const clockPrams = {}
            clockPrams.html = html
            clockPrams.type = this.attrDataInfo.formData.timerType
            clockPrams.mode = this.attrDataInfo.formData.link
            clockPrams.font = this.attrDataInfo.formData.timerFont
            clockPrams.size = this.attrDataInfo.formData.timerFontsize
            clockPrams.color = this.attrDataInfo.formData.timerFontColor
            clockPrams.endDate = this.attrDataInfo.formData.timerEndDate
            clockPrams.endTime = this.attrDataInfo.formData.timerEndTime
            clockPrams.align = 'left'
            this.$eventBus.$emit('changeAttr', 'timer', clockPrams)
        }
    },
    inject: ['attrDataInfo'],
    components: {
        AttrArea
    }
}
</script>

<style lang="scss" scoped>
    ::v-deep .el-input-number--small{
        width: 200px;
    }
    ::v-deep .el-form-item--small.el-form-item {
        margin-bottom: 6px !important;
    }
</style>